<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线挂号</title>
    <style>
        .el-cascader-panel {
            height: 100%;
            width: 28%;
        }
    </style>
</head>
<body>

<div id="app">

    <el-dialog title="挂号详情" :visible.sync="dialogSelcectDiagnosis" width="50%">

        <el-form :model="diagnosis" >
            <el-form-item label="患者自述" :label-width="formLabelWidth">
                <el-input
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        placeholder="请输入内容"
                        v-model="diagnosis.narration"
                        disabled>
                </el-input>
            </el-form-item>
            <el-form-item label="诊断结果" :label-width="formLabelWidth">
                <el-input
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        placeholder="请输入内容"
                        v-model="diagnosis.diagnosisResult"
                        disabled>
                </el-input>
            </el-form-item>
                <el-table
                        :data="diagnosis.medicationList"
                        style="width: 100%">
                    <el-table-column
                            prop="medicationName"
                            label="药品/服务名称">
                    </el-table-column>
                    <el-table-column
                            prop="charge"
                            label="收费">
                    </el-table-column>
                </el-table>
            <br>
            <el-form-item label="总收费" :label-width="formLabelWidth">
                <el-input v-model="diagnosis.totalCharges" autocomplete="off" style="width: 15%" disabled></el-input>
            </el-form-item>

        </el-form>

    </el-dialog>


    <el-dialog title="添加诊疗卡" :visible.sync="dialogAddPatient" width="35%">
        <el-form :model="addPatient" >
            <el-form-item label="姓名:" :label-width="formLabelWidth">
                <el-input v-model="addPatient.patientName" autocomplete="off" style="width: 30%"></el-input>
            </el-form-item>
            <el-form-item label="身份证:" :label-width="formLabelWidth">
                <el-input v-model="addPatient.idCard" autocomplete="off" style="width: 60%"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogAddPatient = false">取 消</el-button>
            <el-button type="primary" @click="AddPatient(),dialogAddPatient = false">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="就诊人管理" :visible.sync="dialogSelectPatient" width="35%">
        <el-table
                :data="patientList"
                style="width: 100%">
            <el-table-column
                    prop="patientName"
                    label="姓名">
            </el-table-column>
            <el-table-column
                    prop="idCard"
                    label="身份证">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="danger" size="mini" @click="DeletePatient(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>
        <br>
        <div style="height: 30px">
            <el-button type="primary" plain @click="dialogAddPatient = true" style="float: right">新建诊疗卡</el-button>
        </div>



    </el-dialog>

    <el-dialog
            title="选择就诊人"
            :visible.sync="dialogChoosePatient"
            width="30%">
        <template>
            <span>就诊人&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <el-select v-model="value" filterable placeholder="请选择">
                <el-option
                        v-for="patient in patientList"
                        :key="patient.patientId"
                        :label="patient.patientName"
                        :value="patient.patientId">
                </el-option>
            </el-select>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <el-button type="primary" @click="AddReception(),dialogChoosePatient= false">确 定</el-button>
        </template>
    </el-dialog>

    <el-dialog
            title="选择时段"
            :visible.sync="dialogSelectDoctorDuty"
            width="50%">
            <el-table
                    :data="doctorDuty"
                    style="width: 100%">
                <el-table-column
                        prop="dateTime"
                        label="时间段"
                        width="500">
                </el-table-column>
                <el-table-column
                        prop="partialNum"
                        label="余号">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="getPatientId(scope.$index, scope.row),dialogChoosePatient= true">挂号</el-button>
                    </template>
                </el-table-column>
            </el-table>

    </el-dialog>

    <div>
        <h2>医院门诊</h2>
        <el-divider></el-divider>
    </div>
    <template>
        <el-tabs :tab-position="tabPosition" style="height: 600px;">
            <el-tab-pane label="在线挂号">
                <span>&nbsp;&nbsp;预约门诊</span>
                <br>
                <br>
                <el-cascader-panel :options="outpatients"
                                   ref="cascader">
                </el-cascader-panel>
                <br>
                <div class="block">
                    <span class="demonstration">选择日期</span>
                    <el-date-picker
                            v-model="selectDoctorDate"
                            type="date"
                            placeholder="只能预约7天内"
                            :picker-options="pickerSelectDate"
                            @change="getDoctorDuty()">
                    </el-date-picker>

                    <el-button type="primary" plain @click="SelectPatient(),dialogSelectPatient = true" style="float: right">就诊人管理</el-button>

                </div>
                <el-table
                        :data="doctorList"
                        style="width: 100%"
                        :row-class-name="tableRowClassName"
                        height="550px">
                    <el-table-column
                            prop="doctorName"
                            label="医师姓名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="position"
                            label="职位"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="introduction"
                            label="简介">
                    </el-table-column>
                    <el-table-column
                            prop="totalNum"
                            label="总接待数">
                    </el-table-column>
                    <el-table-column
                            prop="partialNum"
                            label="剩余">
                    </el-table-column>
                    <el-table-column
                            prop="charge"
                            label="收费/(元)">
                    </el-table-column>
                    <br>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-search"
                                       size="mini"
                                       @click="SelectDuty(scope.$index, scope.row),dialogSelectDoctorDuty= true">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>

            </el-tab-pane>
            <el-tab-pane label="挂号记录">
                <el-table
                        :data="receptionVoList"
                        style="width: 100%"
                        :row-class-name="tableRowClassName"
                        height="550px">
                    <el-table-column
                            prop="patientName"
                            label="就诊人"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="doctorName"
                            label="医生"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="outpatientName"
                            label="门诊">
                    </el-table-column>
                    <el-table-column
                            prop="dateTime"
                            label="就诊时间">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-search"
                                       size="mini"
                                       @click="getDiagnosis(scope.$index, scope.row)">挂号详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="待问诊诊单">
                <el-table
                        :data="newReceptionVoList"
                        style="width: 100%"
                        :row-class-name="tableRowClassName"
                        height="550px">
                    <el-table-column
                            prop="patientName"
                            label="就诊人"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="doctorName"
                            label="医生"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="outpatientName"
                            label="门诊">
                    </el-table-column>
                    <el-table-column
                            prop="dateTime"
                            label="就诊时间">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-search"
                                       size="mini"
                                       @click="deleteRecption(scope.$index, scope.row)">取消预约</el-button>
                        </template>
                    </el-table-column>
                </el-table>

            </el-tab-pane>
        </el-tabs>
    </template>
</div>


<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script src="js/axios-0.18.0.js"></script>

<script>
    const token = localStorage.getItem('token');
    new Vue({
        el: "#app",
        mounted() {
            this.getTreeOutpatients()
            this.getReception()
            this.SelectPatient()
            this.getNewReceptionVoList()
        },
        methods: {
            deleteRecption(index,row){
                var reception ={};
                reception.receptionId = row.receptionId;
                var _this = this
                axios({
                    method:"post",
                    url:"/reception/deleteReceptionById",
                    data:reception,
                    headers: {
                        Authorization: `${token}`
                    }
                }).then(function (resp) {
                    if(resp.data.code == 20031){
                        _this.getNewReceptionVoList()
                        _this.getReception()
                    }else if(resp.data.code == 20050){
                        alert(resp.data.msg)
                        window.location.assign("patientLogin.html");
                    }else if(resp.data.code == 20030){
                        alert(resp.data.msg)
                    }
                })
            },
            getNewReceptionVoList(){
                var _this = this
                axios({
                    method:"get",
                    url:"/reception/getNewReceptionByUserId",
                    headers: {
                        Authorization: `${token}`
                    }
                }).then(function (resp) {
                    if(resp.data.code == 20041){
                        _this.newReceptionVoList = resp.data.data
                    }else if(resp.data.code == 20050){
                        alert(resp.data.msg)
                        window.location.assign("patientLogin.html");
                    }else{
                        alert("失败")
                    }
                })
            },
            getDiagnosis(index,row){
                var reception = {}
                reception.receptionId = row.receptionId
                var _this = this
                axios({
                    method:"post",
                    url:"/diagnosis/getDiagnosisByReceptionId",
                    data:reception,
                    headers: {
                        Authorization: `${token}`
                    }
                }).then(function (resp) {
                    if(resp.data.code == 20041){
                        _this.diagnosis = resp.data.data
                        _this.dialogSelcectDiagnosis =true
                    }else if(resp.data.code == 20050){
                        alert(resp.data.msg)
                        window.location.assign("patientLogin.html");
                    }else if(resp.data.code == 20040){
                        alert("还未完成问诊")
                    }
                })
            },
            getReception(){
                var _this = this
                axios({
                    method:"post",
                    url:"/reception/getReceptionByUserId",
                    data:_this.user,
                    headers: {
                        Authorization: `${token}`
                    }
                }).then(function (resp) {
                    if(resp.data.code == 20041){
                        _this.receptionVoList = resp.data.data
                    }else if(resp.data.code == 20050){
                        alert(resp.data.msg)
                        window.location.assign("patientLogin.html");
                    }else{
                        alert("失败")
                    }
                })
            },
            getPatientId(index, row){
                this.reception.dutyId = row.dutyId
            },
            AddReception(){
                var _this = this
                this.reception.patientId = this.value
                axios({
                    method:"post",
                    url:"/reception/addReception",
                    data:_this.reception,
                    headers: {
                        Authorization: `${token}`
                    }
                }).then(function (resp) {
                    if(resp.data.code == 20011){
                        _this.getReception()
                        _this.getNewReceptionVoList()
                    }else if(resp.data.code == 20050){
                        alert(resp.data.msg)
                        window.location.assign("patientLogin.html");
                    }else if(resp.data.code == 20010){
                        alert("失败")
                    }
                })
            },
            SelectDuty(index,row){
                var _this = this
                var duty={}
                duty.doctorId = row.doctorId
                duty.dutyDate = this.selectDoctorDate
                axios({
                    method:"post",
                    url:"/duty/getDutyByDoctorIdAndTime",
                    data:duty,
                    headers: {
                        Authorization: `${token}`
                    }
                }).then(function (resp) {
                    if(resp.data.code == 20041){
                        _this.doctorDuty = resp.data.data
                    }else if(resp.data.code == 20050){
                        alert(resp.data.msg)
                        window.location.assign("patientLogin.html");
                    }else{
                        alert("失败")
                    }
                })
            },
            DeletePatient(index,row){
                var _this = this
                _this.deletePatient.patientId = row.patientId
                axios({
                    method:"post",
                    url:"/patient/deletePatient",
                    data:_this.deletePatient,
                    headers: {
                        Authorization: `${token}`
                    }
                }).then(function (resp) {
                    if(resp.data.code == 20031){
                        _this.SelectPatient()
                    }else if(resp.data.code == 20050){
                        alert(resp.data.msg)
                        window.location.assign("patientLogin.html");
                    }else if(resp.data.code == 20030){
                        alert("失败")
                    }
                })
            },
            SelectPatient(){
                var _this = this
                axios({
                    method:"post",
                    url:"/patient/getPatientByUserId",
                    data:_this.user,
                    headers: {
                        Authorization: `${token}`
                    }
                }).then(function (resp) {
                    if(resp.data.code == 20041){
                        _this.patientList = resp.data.data
                    }else if(resp.data.code == 20050){
                        alert(resp.data.msg)
                        window.location.assign("patientLogin.html");
                    }else{
                        alert("失败")
                    }
                })
            },
            AddPatient(){
                var _this = this
                axios({
                    method:"post",
                    url:"/patient/addPatient",
                    data:_this.addPatient,
                    headers: {
                        Authorization: `${token}`
                    }
                }).then(function (resp) {
                    if(resp.data.code == 20011){
                        _this.SelectPatient()
                    }else if(resp.data.code == 20050){
                        alert(resp.data.msg)
                        window.location.assign("patientLogin.html");
                    }else if(resp.data.code == 20010){
                        alert("失败")
                    }
                })
            },
            getDoctorDuty(){
                const checkedNodes = this.$refs.cascader.getCheckedNodes()
                this.doctorDutyDto.outpatientId = checkedNodes.map(node => node.value)[0];
                if(this.doctorDutyDto.outpatientId == null){
                    alert("请先选择预约门诊")
                    this.selectDoctorDate = null
                    return
                }
                var _this = this
                this.doctorDutyDto.dutyDate = this.selectDoctorDate
                axios({
                    method:"post",
                    url:"/duty/getDoctorDutyByDateTime",
                    data:_this.doctorDutyDto,
                    headers: {
                        Authorization: `${token}`
                    }
                }).then(function (resp) {
                    if(resp.data.code == 20041){
                        _this.doctorList = resp.data.data
                    }else if(resp.data.code == 20050){
                        alert(resp.data.msg)
                        window.location.assign("patientLogin.html");
                    }else{
                        alert("失败")
                    }
                })

            },
            tableRowClassName({row, rowIndex}) {
                let rindex=rowIndex % 4;
                if (rindex === 1) {
                    return 'warning-row';
                } else if (rindex === 3) {
                    return 'success-row';
                }
                return '';
            },
            getTreeOutpatients(){
                var _this = this
                axios({
                    method:"get",
                    url:"/outpatient/getAllOutpatientTree",
                    headers: {
                        Authorization: `${token}`
                    }
                }).then(function (resp) {
                    if(resp.data.code == 20041){
                        _this.outpatients = resp.data.data
                    }else if(resp.data.code == 20050){
                        alert(resp.data.msg)
                        window.location.assign("patientLogin.html");
                    }
                    else{
                        alert("失败")
                    }
                })
            }

        },
        data() {
            return {
                pickerSelectDate: {
                    disabledDate(time) {
                        return time.getTime() > Date.now() + 1000 * 60 * 60 * 24 * 7 || time.getTime() < Date.now() - 1000 * 60 * 60 * 24;
                    }
                },
                outpatients: [],
                tabPosition: 'left',
                selectDoctorDate: '',
                doctorList:[],
                doctorDuty:[],
                dialogSelectDoctorDuty: false,
                dialogAddPatient:false,
                formLabelWidth: '120px',
                doctorDutyDto:{
                    outpatientId:'',
                    dutyDate: '',
                },
                addPatient:{
                    userId:'',
                    patientName:'',
                    idCard:'',
                },
                patientList:[{
                    patientId:'',
                    userId:'',
                    patientName:'',
                    idCard:''
                }],
                dialogSelectPatient: false,
                user:{
                    userId:''
                },
                deletePatient:{
                    patientId:'',
                    patientName:'',
                    idCard:''
                },
                dialogChoosePatient: false,
                options: [],
                value: '',
                reception:{
                    patientId:'',
                    dutyId:'',
                    diagnosisId:''
                },
                receptionVoList:[],
                dialogSelcectDiagnosis:false,
                diagnosis:{},
                newReceptionVoList:[],
            }

        }
    })

</script>

</body>
</html>